<template>
  <div class="manage_1">
    <div class="table-box">
      <el-table
        :data="productionList[pageIndex-1]"
        style="width: 100%"
        :header-cell-style="getRowClass"
        :row-class-name="clickProduction"
        @row-click="clickRow"
        size="small">
        <el-table-column
          type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="production_detail">
              <el-form-item label="商品分类">
                <span >{{props.row.cate_name}}</span>
              </el-form-item>
              <el-form-item label="商品市场价格">
                <span>{{props.row.ot_price}}</span>
              </el-form-item>
              <el-form-item label="成本价">
                <span>{{props.row.cost}}</span>
              </el-form-item>
              <el-form-item label="收藏">
                <span>{{props.row.collect}}</span>
              </el-form-item>
              <el-form-item label="虚拟销量">
                <span>{{props.row.ficti}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品ID"
          width="80">
        </el-table-column>
        <el-table-column
          label="商品图"
          width="120">
          <template slot-scope="scope">
            <viewer :images="scope.row.slider_image">
              <div class="img" v-for="(item,index) of scope.row.slider_image" :key="index">
                <img v-show="index===0" :src="item" alt="">
              </div>
            </viewer>
          </template>
        </el-table-column>
        <el-table-column
          prop="store_name"
          label="商品名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="product_type"
          label="商品类型">
        </el-table-column>
        <el-table-column
          prop="price"
          label="商品售价">
        </el-table-column>
        <el-table-column
          prop="sales"
          label="销量">
        </el-table-column>
        <el-table-column
          prop="stock"
          label="库存">
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <i-switch size="large" v-model="scope.row.is_show===0?false:true">
              <span slot="open">上架</span>
              <span slot="close">下架</span>
            </i-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button @click="checkProduction(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看评论</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">移到回收站</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Page :total="total" @on-change="changePage" show-elevator></Page>
    </div>
    <aside>
      <Modal
        v-model="checkModal"
        :closable="false"
        width="400">
        <div class="production_detail" v-if="production_detail">
          <div class="p_title">商品详情</div>
          <div class="p_body">
            <div class="slider">
              <el-carousel height="400px" indicator-position="none">
                <el-carousel-item v-for="(item,index) in production_detail.slider_image" :key="index">
                  <img :src="item" alt="">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="p_info">
              <div class="price">
                <i class="c_r f_s">￥</i>
                <span class="c_r f_l">{{production_detail.price}}</span>
                <i class="c_b f_s">￥</i>
                <span class="c_b f_s">{{production_detail.vip_price}}</span>
                <img src="../../../assets/imgs/svip.png" alt="">
              </div>
              <div class="name">
                <span>{{production_detail.store_name}}</span>
              </div>
              <p>
                <i>原价:<span>{{production_detail.ot_price}}</span></i>
                <i>销量:<span>{{production_detail.sales}}</span></i>
                <i>库存:<span>{{production_detail.stock}}</span></i>
              </p>
            </div>
            <div class="hr"></div>
            <div class="p_intro">
              <div class="p_title">商品介绍</div>
              <div class="p_content" v-html="production_detail.description"></div>
            </div>
          </div>
        </div>
        <div slot="footer"></div>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import totalProduction from '../../../apiData/productionList/selling.js'
  export default {
    name: "manage_1",
    props: {
      name: {
        type: String
      }
    },
    data() {
      return {
        loading: false,
        productionList: [],
        pageIndex: 1,
        total: 0,
        rowIndex: null,
        checkModal: false,
        production_detail: {},
      }
    },
    watch: {
      pageIndex: {
        handler(val, oldVal) {
          this.loading = true;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          },1500)
        },
        immediate: true
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.productionList = totalProduction.list;
        this.total = totalProduction.count;
        this.production_detail = totalProduction.list[this.pageIndex][0].detail;
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      clickProduction({row, rowIndex}) {
        if (rowIndex === this.rowIndex) {
          return 'active-row';
        }
        return '';
      },
      clickRow(row) {
        let rowIndex = this.productionList.indexOf(row);
        this.rowIndex = rowIndex;
      },
      changePage(e) {
        this.pageIndex = e
      },
      // 查看
      checkProduction(row) {
        this.production_detail = row.detail;
        this.checkModal = true
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .manage_1 {
    .table-box{
      padding: 10px 0;
      border-radius: 4px;
    }
    /deep/ .el-table{
      .el-table__header{
        tr{
          background: #000;
        }
      }
      .img{
        img{
          max-width: 50px;
          max-height: 50px;
          cursor: pointer;
        }
      }
      .active-row{
        background: #ebf7ff;
      }
      .hover-row{
        background: #ebf7ff !important;
      }
    }
    /deep/ .el-form{
      padding: 0 20px 0 90px;
      background: #f9f9f9;
      border-radius: 4px;
      .el-form-item{
        width: 30%;
        margin-bottom: 10px;
        padding-left: 20px;
      }
    }
    .page{
      /*border: 1px solid red;*/
      padding: 16px;
      display: flex;
      justify-content: right;
    }
  }
</style>
<style lang="scss" scoped>
  /deep/ .ivu-modal {
    .ivu-modal-body{
      padding: 0;
    }
    .ivu-modal-content{
      border-radius: 0;
    }
    .ivu-modal-footer{
      border-top: none;
      padding: 0;
    }
    .production_detail::-webkit-scrollbar {
      width: 1px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    .production_detail{
      max-height: 700px;
      overflow-y: auto;
      .p_title{
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
      }
      .p_body{
        .slider{
          overflow: hidden;
          img{
            min-width: 100%;
            height: 100%;
          }
        }
        .p_info{
          padding: 10px;
          .price{
            .c_r{
              color: #F00;
            }
            .f_l{
              font-size: 20px;
            }
          }
          .name{
            span{
              color: #333;
            }
          }
          p{
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            span{
              color: #888;
            }
          }
        }
        .hr{
          height: 10px;
          background: #ddd;
        }
        .p_intro{
          /deep/ .p_content{
            img{
              max-width: 100%;
            }
          }
        }
      }
    }
  }
</style>
